<template>
  <view>
    <image
      class="w-700rpx"
      mode="widthFix"
      :src="fansStore.invite_poster"
      @error="fansStore.invite_poster = ''"
      v-if="fansStore.invite_poster"
    />
    <l-painter
      ref="painter"
      v-else
      :board="tpl"
      file-type="png"
      path-type="url"
      isCanvasToTempFilePath
      @success="fansStore.invite_poster = $event"
    />
    <view class="footer">
      <view class="save-btn" @click.stop="save()">保存到相册</view>
      <view class="invite-btn" @click.stop="share()">点击并长按转发</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useFansStore } from '@/store/fans';
  import { msg } from '@/utils/msg';
  import { config } from '@/config/env';

  const fansStore = useFansStore();
  const tpl = ref<any>({});
  const painter = ref<any>();
  let url = '';
  let avatar = fansStore.fansinfo.avatar || config.custom.avatar;
  let nickname = fansStore.fansinfo.nickname || config.custom.nickname;

  /* #ifdef MP-WEIXIN */
  url = `${config.env.prod.base_url}/wxapp/invite?code=${fansStore.fansinfo.invite_code}`;
  /* #endif */

  /* #ifdef H5 */
  url = `${location.origin}/#/pages/auth/register?code=${fansStore.fansinfo.invite_code}`;
  /* #endif */

  tpl.value = {
    views: [
      {
        type: 'view',
        css: {
          boxSizing: 'border-box',
          // background: '#fff',
        },

        views: [
          {
            type: 'image',
            src: 'https://assets.miaodao.qichangsheng.com/cbc6f5eecedd0ee2d4a2bcec2f805df5.jpg',
            css: {
              boxSizing: 'border-box',
              width: '650rpx',
              height: '1040rpx',
              marginTop: '50rpx',
              marginBottom: '50rpx',
              marginLeft: '50rpx',
              borderRadius: '35rpx',
              textAlign: 'center',
            },

            views: [
              // 标题
              {
                type: 'text',
                text: '邀请好友加入黔青苗道',
                css: {
                  color: '#fff',
                  fontSize: '38rpx',
                  marginTop: '80rpx',
                },
              },
              // 内框
              {
                type: 'view',
                css: {
                  width: '570rpx',
                  height: '760rpx',
                  marginTop: '110rpx',
                  marginLeft: '40rpx',
                  background: '#fff',
                  borderRadius: '35rpx',
                },
                views: [
                  // 头像
                  {
                    type: 'image',
                    src: avatar,
                    css: {
                      objectFit: 'cover',
                      width: '120rpx',
                      border: '8rpx solid #fff',
                      borderRadius: '50%',
                      position: 'absolute',
                      top: '-50rpx',
                      left: '225rpx',
                    },
                  },
                  // 昵称
                  {
                    type: 'view',
                    views: [
                      {
                        type: 'text',
                        text: nickname,
                        css: {
                          fontSize: '32rpx',
                          marginTop: '100rpx',
                        },
                      },
                    ],
                  },
                  // 识别文字
                  {
                    type: 'view',
                    views: [
                      {
                        type: 'text',
                        text: '长按识别图中二维码',
                        css: {
                          color: '#757576',
                          fontSize: '24rpx',
                          marginTop: '60rpx',
                        },
                      },
                    ],
                  },
                  {
                    type: 'view',
                    views: [
                      {
                        type: 'image',
                        src: 'https://assets.miaodao.qichangsheng.com/2b5ec32cb78f0542439c83ca96823730.png',
                        css: {
                          width: '340rpx',
                          position: 'absolute',
                          top: '30rpx',
                          left: '115rpx',
                        },
                      },
                    ],
                  },
                  // 二维码
                  {
                    type: 'view',
                    views: [
                      {
                        type: 'qrcode',
                        text: url,
                        css: {
                          width: '250rpx',
                          height: '250rpx',
                          marginTop: '80rpx',
                        },
                      },
                    ],
                  },
                  // logo
                  {
                    type: 'view',
                    views: [
                      {
                        type: 'image',
                        src: 'https://assets.miaodao.qichangsheng.com/c350bddf03168af212275c81e5bdb482.png',
                        css: {
                          width: '125rpx',
                          marginTop: '85rpx',
                        },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  };

  const emit = defineEmits(['closePoster']);

  // fansStore.invite_poster = '';
  // 保存
  const save = () => {
    /* #ifndef H5 */
    //非H5 保存到相册
    uni.saveImageToPhotosAlbum({
      filePath: fansStore.invite_poster,
      success: function () {
        msg.success('已保存到相册');
      },
    });
    /* #endif */

    // H5 提示用户长按图另存
  };

  // 分享
  const share = () => {
    emit('closePoster');
    setTimeout(() => {
      uni.previewImage({
        urls: [fansStore.invite_poster],
      });
    }, 300);
  };
</script>
<style lang="scss" scoped>
  .footer {
    display: flex;
    justify-content: center;
    margin: 0 0 60rpx;

    .save-btn,
    .invite-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      border-radius: 50rpx;
      letter-spacing: 2rpx;
    }
    .save-btn {
      width: 220rpx;
      margin-right: 30rpx;
      color: #ffffff;
      background: #006663;
    }

    .invite-btn {
      width: 370rpx;
      color: #1a5c51;
      background: #c4df9b;
    }
  }
</style>
